<template>
  <div>
    <a style="color:#515A6E">
      <Icon @click.native="back()" style="float:left;" type="md-arrow-back" size="24"></Icon>
    </a>
    <h2>{{ majorName }}专业课程管理</h2>
    <br />
    <Tabs :value="page" @on-click="clicked">
      <TabPane label="设置专业课程" icon="ios-book" name="page1">
        <page1 :majorId="majorId" :mvId="mvId" :key="new Date().getTime()"></page1>
      </TabPane>

      <TabPane label="专业方向管理" icon="md-shuffle" name="page2">
        <page2 :majorId="majorId" :mvId="mvId" :key="new Date().getTime()"></page2>
      </TabPane>

      <TabPane label="毕业条件" icon="ios-bookmark" name="page3">
        <page3 :majorId="majorId" :mvId="mvId" :key="new Date().getTime()"></page3>
      </TabPane>

      <TabPane label="选考课程" icon="ios-options" name="page4">
        <page4 :majorId="majorId" :mvId="mvId" :key="new Date().getTime()"></page4>
      </TabPane>

      <TabPane label="设置证书顶替" icon="md-sync" name="page5">
        <page5 :majorId="majorId" :mvId="mvId" :key="new Date().getTime()"></page5>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import page1 from "./SetMajorCoursePage1.vue";
import page2 from "./SetMajorCoursePage2.vue";
import page3 from "./SetMajorCoursePage3.vue";
import page4 from "./SetMajorCoursePage4.vue";
import page5 from "./SetMajorCoursePage5.vue";
export default {
  data() {
    return {
      majorName: this.$route.query.mjName,
      majorId: this.$route.query.mjId,
      mvId: this.$route.query.mvId,
      page: "page1"
    };
  },
  components: { page1, page2, page3, page4, page5 },

  created() {
    this.page = this.$cookies.get("tabname");
  },

  methods: {
    clicked(name) {
      this.$cookies.set("tabname", name);
    },
    back() {
      this.$router.go(-1);
      this.$cookies.remove("tabname");
    }
  }
};
</script>